<template>
	<xbd-pages-content title="个人中心">
		<template #content>
			<view class="personal-center">
				<view class="header">
					<image class="header-img" :src="userInfo.user_avatar | imgFormat" mode=""></image>
					<view class="header-info">
						<view class="header-info-name">
							{{ userInfo.user_name }}
						</view>
						<view class="header-info-department">
							<text>{{ userInfo.user_department || '-' }}{{' '}}</text>
							<text class="two">{{' '}}{{ userInfo.user_job || '-' }}</text>
						</view>
					</view>
					<image class="header-edit" src="@/static/images/common/pen.svg" mode="" @click="edit"></image>
				</view>
				<view class="center">
					<card-content title="访客审批" :num="count.visitor"></card-content>
					<card-content title="餐券申请" :num="count.ticket"></card-content>
					<card-content title="用车申请" :num="count.vehicle"></card-content>
					<card-content title="住房申请" :num="count.house"></card-content>
				</view>
				<!-- #ifdef APP-PLUS || H5 -->  
				<button class="btn" type="default" @click="logOut">退出登录</button>
				<!-- #endif -->
				<image class="bg" src="@/static/images/common/job.png" mode=""></image>
			</view>
		</template>
	</xbd-pages-content>
</template>

<script>
	import CardContent from '@/components/personalcenter/CardContent.vue';
	import { mapState } from 'vuex';
	import { PersonalCenter } from '@/api/index.js';
	export default {
		data() {
			return {
				count: {
					house: 0,
					ticket: 0,
					vehicle: 0,
					visitor: 0
				}
			};
		},
		components: {
			CardContent
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			logOut() {
				uni.showModal({
					title: '退出登录',
					content: '退出后不会删除历史数据，下次登录依然可以使用本账号',
					confirmText: '退出登录',
					success(res) {
						if (res.confirm) {
							// 清空缓存和vuex数据
							uni.removeStorageSync('token');
							uni.removeStorageSync('userInfo');
							uni.reLaunch({
								url: '../login/login'
							})
						} else if (res.cancel) {
							console.log('取消');
						}
					}
				})
			},
			edit() {
				uni.navigateTo({
					url: './personaldata',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			async init() {
				try {
					this.$showLoading('加载中');
					const res = await PersonalCenter.getPersonalCount();
					if (res.success) {
						this.count = res.data.count;
						console.log(res)
					} else {
						this.$showToast(res.msg);
					}
					uni.hideLoading();
				} catch(e) {
					uni.hideLoading();
				}
			}
		},
		onLoad() {
			this.init();
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .card-content {
		margin-bottom: 20px;
		&:nth-last-child(1) {
			margin-bottom: 0;
		}
	}
	.personal-center {
		.header {
			display: flex;
			
			padding: 20px 50rpx;
			margin-bottom: 5px;
			
			background-color: #FFFFFF;
			&-img {
				width: 100rpx;
				height: 100rpx;
				margin-right: 40rpx;
				border-radius: 50%;
			}
			&-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				&-name {
					font-size: 16px;
					
					color: $uni-text-color;
				}
				&-department {
					font-size: 12px;
					
					color: #999999;
					.two {
						margin-left: 40rpx;
					}
				}
			}
			&-edit {
				width: 34rpx;
				height: 34rpx;
			}
		}
		.center {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 20px 50rpx;
			width: 750rpx;
			/* #ifdef APP-PLUS || H5 */
			height: 340px;
			/* #endif */
			/* #ifndef APP-PLUS || H5 */
			height: 260px;
			/* #endif */
			margin-bottom: 10px;
			
			background: url(../../static/images/common/personal-bg.png) no-repeat;
			background-size: 100% 100%;
			box-sizing: border-box;
		}
		/* #ifdef APP-PLUS || H5 */
		.btn {
			width: 750rpx;
			height: 60px;
			line-height: 60px;
			
			font-size: 14px;
			
			color: #666666;
			background-color: #FFFFFF;
			&::after {
				border: 0;
			}
		}
		/* #endif */
		.bg {
			width: 750rpx;
		}
	}
</style>
